<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../icon/iconfont.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../js/jquery-2.0.3.min.js"></script>
    <div class="main">
        <div class="title">
            <div class="one">维修维保</div>
            <div class="two">MAINTENANCEC</div>
        </div>
        <div class="wb">
            <div class="wb-title">
                <span class="iconfont icon-gongzuojihua"></span>
                <div class="t-font">
                    <span style="font-size: 16px; color:rgba(255, 255,255, 0.4); margin-right:10px;">本 年 维 保 次 数 :</span>
                    <span style="font-size: 18px; color: #fff;"> 5 5 7 次</span>
                </div>
            </div>
            <div class="wb-main">
                <div>
                    <div class="chart" data-percent="15.44">
                        <span class="percent" style="font-size: 16px;color: #fff;"></span>
                    </div>
                    <div class="text">
                        <span style="color: rgba(255, 255,255, 0.4);font-size: 18px;">[</span> <span style="color: #fff;font-size: 18px;"> 86 </span> <span style="font-size: 16px; color: rgba(255, 255,255, 0.4);">项</span> <span style="color: rgba(255, 255,255, 0.4); font-size: 18px;"> ]</span>
                        <div style="color: #fff; font-size: 16px;"> 本 年 保 养 计 划 </div>
                    </div>
                </div>
                <div>
                    <div class="chart1" data-percent="83.66">
                        <span class="percent" style="font-size: 16px;color: #fff;"></span>
                    </div>
                    <div class="text">
                        <span style="color: rgba(255, 255,255, 0.4);font-size: 18px;">[</span> <span style="color: #fff;font-size: 18px;"> 466 </span> <span style="font-size: 16px; color: rgba(255, 255,255, 0.4);">项</span> <span style="color: rgba(255, 255,255, 0.4); font-size: 18px;"> ]</span>
                        <div style="color: #fff; font-size: 16px;"> 本 年 检 修 计 划 </div>
                    </div>
                </div>
                <div>
                    <div class="chart2" data-percent="0.9">
                        <span class="percent" style="font-size: 16px;color: #fff;"></span>
                    </div>
                    <div class="text">
                        <span style="color: rgba(255, 255,255, 0.4);font-size: 18px;">[</span> <span style="color: #fff;font-size: 18px;"> 5 </span> <span style="font-size: 16px; color: rgba(255, 255,255, 0.4);">项</span> <span style="color: rgba(255, 255,255, 0.4); font-size: 18px;"> ]</span>
                        <div style="color: #fff; font-size: 16px;"> 本 年 润 滑 计 划 </div>
                    </div>
                </div>
                <div class="wb-bottom">
                    <div class="left" style="font:16px / 1 'Helvetica', 'Arial', sans-serif;">
                        <span style="margin-right: 20px; font-size: 16px; color: rgba(255, 255,255, 0.4);">计划完成度 : </span>
                        <span style="color: #fff; font-size: 16px;">6 项</span>
                    </div>
                    <div class="right" style="font:16px / 1 'Helvetica', 'Arial', sans-serif;">
                        <span style="margin-right: 20px; font-size: 16px; color: rgba(255, 255,255, 0.4);">维修次数 : </span>
                        <span style="color: #fff; font-size: 16px;">1 次</span>
                    </div>
                </div>
            </div>
           
        </div>
        <div class="wb">
            <div class="wb-title">
                <span class="iconfont icon-gongzuojihua"></span>
                <div class="t-font">
                    <span style="font-size: 16px; color:rgba(255, 255,255, 0.4); margin-right:10px;">本 月 计 划 事 项 :</span>
                    <span style="font-size: 18px; color: #fff;"> 1 3 1 次</span>
                </div>
            </div>
            <div class="wb-main">
                <div>
                    <div class="chart3" data-percent="15.27">
                        <span class="percent" style="font-size: 16px;color: #fff;"></span>
                    </div>
                    <div class="text">
                        <span style="color: rgba(255, 255,255, 0.4);font-size: 18px;">[</span> <span style="color: #fff;font-size: 18px;"> 20 </span> <span style="font-size: 16px; color: rgba(255, 255,255, 0.4);">项</span> <span style="color: rgba(255, 255,255, 0.4); font-size: 18px;"> ]</span>
                        <div style="color: #fff; font-size: 16px;"> 本 年 保 养 计 划 </div>
                    </div>
                </div>
                <div>
                    <div class="chart4" data-percent="83.97">
                        <span class="percent" style="font-size: 16px;color: #fff;"></span>
                    </div>
                    <div class="text">
                        <span style="color: rgba(255, 255,255, 0.4);font-size: 18px;">[</span> <span style="color: #fff;font-size: 18px;"> 110 </span> <span style="font-size: 16px; color: rgba(255, 255,255, 0.4);">项</span> <span style="color: rgba(255, 255,255, 0.4); font-size: 18px;"> ]</span>
                        <div style="color: #fff; font-size: 16px;"> 本 年 检 修 计 划 </div>
                    </div>
                </div>
                <div>
                    <div class="chart5" data-percent="0.76">
                        <span class="percent" style="font-size: 16px;color: #fff;"></span>
                    </div>
                    <div class="text">
                        <span style="color: rgba(255, 255,255, 0.4);font-size: 18px;">[</span> <span style="color: #fff;font-size: 18px;"> 1 </span> <span style="font-size: 16px; color: rgba(255, 255,255, 0.4);">项</span> <span style="color: rgba(255, 255,255, 0.4); font-size: 18px;"> ]</span>
                        <div style="color: #fff; font-size: 16px;"> 本 年 润 滑 计 划 </div>
                    </div>
                </div>
                <div class="wb-bottom">
                    <div class="left" style="font:16px / 1 'Helvetica', 'Arial', sans-serif;">
                        <span style="margin-right: 20px; font-size: 16px; color: rgba(255, 255,255, 0.4);">计划完成度 : </span>
                        <span style="color: #fff; font-size: 16px;">0 项</span>
                    </div>
                    <div class="right" style="font:16px / 1 'Helvetica', 'Arial', sans-serif;">
                        <span style="margin-right: 20px; font-size: 16px; color: rgba(255, 255,255, 0.4);">维修次数 : </span>
                        <span style="color: #fff; font-size: 16px;">0 次</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="button">
            <div class="in">
                <span style="display: block; color: #fff; font-size: 28px; margin-left: 10px;
                margin-bottom: 5px;" class="iconfont icon-weibao"></span>
                <span style=" text-align:center;display: block; color: #fff; font-size: 18px;">维保计划</span>
            </div>
            <div class="in bt-ml">
                <span style="display: block; color: #fff; font-size: 28px; margin-left: 10px;
                margin-bottom: 5px;" class="iconfont icon-xinzeng"></span>
                <span style=" text-align:center;display: block; color: #fff; font-size: 18px;">新增维保</span>
            </div>
            <div class="in bt-ml">
                <span style="display: block; color: #fff; font-size: 28px; margin-left: 10px;
                margin-bottom: 5px;" class="iconfont icon-weixiu"></span>
                <span style=" text-align:center;display: block; color: #fff; font-size: 18px;">维修</span>
            </div>
            <div class="in bt-ml">
                <span style="display: block; color: #fff; font-size: 28px; margin-left: 10px;
                margin-bottom: 5px;" class="iconfont icon-tixing"></span>
                <span style=" text-align:center;display: block; color: #fff; font-size: 18px;">提醒</span>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function() {
            $('.chart').easyPieChart({
                //your configuration goes here
            easing: 'easeOutElastic',
			delay: 3000,
			barColor: '#0c988d',
			trackColor: '#27464b',
			scaleColor: false,
			lineWidth: 20,
			trackWidth: 10,
            lineCap: 'butt',
            lineWidth: 10,
            onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.floor(percent * 100) / 100);
			}
            });
        });
        $(function() {
            $('.chart1').easyPieChart({
                //your configuration goes here
            easing: 'easeOutElastic',
			delay: 3000,
			barColor: '#f6af43',
			trackColor: '#27464b',
			scaleColor: false,
			lineWidth: 20,
			trackWidth: 10,
            lineCap: 'butt',
            lineWidth: 10,
            onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.floor(percent * 100) / 100);
			}
            });
        });
        $(function() {
            $('.chart2').easyPieChart({
                //your configuration goes here
            easing: 'easeOutElastic',
			delay: 3000,
			barColor: '#4388af',
			trackColor: '#27464b',
			scaleColor: false,
			lineWidth: 20,
			trackWidth: 10,
            lineCap: 'butt',
            lineWidth: 10,
            onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.floor(percent * 100) / 100);
			}
            });
        });
        $(function() {
            $('.chart3').easyPieChart({
                //your configuration goes here
            easing: 'easeOutElastic',
			delay: 3000,
			barColor: '#e6957a',
			trackColor: '#27464b',
			scaleColor: false,
			lineWidth: 20,
			trackWidth: 10,
            lineCap: 'butt',
            lineWidth: 10,
            onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.floor(percent * 100) / 100);
			}
            });
        });
        $(function() {
            $('.chart4').easyPieChart({
                //your configuration goes here
            easing: 'easeOutElastic',
			delay: 3000,
			barColor: '#7ff0c5',
			trackColor: '#27464b',
			scaleColor: false,
			lineWidth: 20,
			trackWidth: 10,
            lineCap: 'butt',
            lineWidth: 10,
            onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.floor(percent * 100) / 100);
			}
            });
        });
        $(function() {
            $('.chart5').easyPieChart({
                //your configuration goes here
            easing: 'easeOutElastic',
			delay: 3000,
			barColor: '#7976a5',
			trackColor: '#27464b',
			scaleColor: false,
			lineWidth: 20,
			trackWidth: 10,
            lineCap: 'butt',
            lineWidth: 10,
            onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.floor(percent * 100) / 100);
			}
            });
        });
        </script>
</body>
</html>
<style>
*{
	margin: 0px;
    padding: 0px;
    box-sizing:border-box;
}
.main {
        background: #2a4b54;
        height: 1080px;
        width: 650px;
        font-size: 30px;
        padding: 25px;
}
.title {
    height: 70px;
    background-color:cornflowerblue;
    padding-left: 40px;
    background: url(../image/123456.png) left bottom no-repeat;
    margin-bottom: 30px;
    text-align: left;
}
.title .one{
    font-size: 28px;
    margin-bottom: 5px;
    color: #ed9237;
}
.title .two{
    font-size: 12px;
    color: rgba(255, 255,255, 0.5);

}
.wb {
    height: 390px;
    
    margin-bottom: 35px;
}
.wb-title {
    height: 30px;
    /* background-color: #444; */
    margin-bottom: 15px;
    text-align: left;
}
.wb-main{
    background-color: rgba(255, 255,255, 0.1);
    height: 340px;
    padding-top: 20px;
    padding-left: 50px;
    padding-right: 50px;
    
}
.wb-main .wb-bottom{
    width: 100%;
    height: 80px;
    border: 1px dashed rgba(255, 255,255, 0.4);
    border-radius: .5em;
    padding: 30px;
    
}
.wb-main .wb-bottom .left,
.wb-main .wb-bottom .right {
    width: 50%;
    float: left;
}

.wb-main>div{
    position: relative;
    height: 190px;
    float: left;
    width: 33%;
    margin-bottom: 20px;
}
.wb-main .chart {
    margin-top:0px;
    margin-bottom: 0px;
    margin-bottom: 15px;
}
.wb-main .chart1 {
    margin-top:0px;
    margin-bottom: 0px;
    margin-bottom: 15px;
}
.wb-main .chart2,
.wb-main .chart3,
.wb-main .chart4,
.wb-main .chart5
 {
    margin-top:0px;
    margin-bottom: 0px;
    margin-bottom: 15px;
}
.button {
    height: 85px;
    /* background-color: sandybrown; */
}
.button .in {
    float: left;
    width: 100px;
    height: 85px;
    background-color: rgba(255, 255,255, 0.1);
    padding: 10px;
}
.bt-ml {
    margin-left: 5px;
}
.icon-gongzuojihua {
    display: block;
    font-size: 30px;
    color: #fff;
    float: left;
    margin-right: 10px;
}
.t-font {
    float: left;
    height: 20px;
    margin-top: 5px;
}
.t-font span{
    display: block;
    float: left;
}
</style>